<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="formInline.subjectName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearButton">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-button
            type="success"
            style="float: right"
            icon="el-icon-edit"
            @click="addSubject"
            >新增学科</el-button
          >
        </el-form>
        <el-row class="grid-content bg-purple-light" type="flex" align="middle"
          ><i class="el-icon-info"></i>数据一共{{ this.totals }}条</el-row
        >
        <el-table :data="listDate" style="width: 100%">
          <el-table-column
            prop="creatorID"
            label="序号"
            type="index"
            width="48"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ dateFormat(row.createTime) }}
            </template>
          </el-table-column>
          <!-- 显示 -->
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"

          >
          <template #default="{ row }">
              {{ subjectEnum[row.isFrontDisplay] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"

          >
          </el-table-column>
          <el-table-column prop="tags" label="标签" >
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" >
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="toDirectory(row)"
                >学科分类</el-button
              >
              <el-button type="text" size="small" @click="toTags(row)"
                >学科标签</el-button
              >
              <el-button type="text" size="small" @click="editSubmit(row)"
                >修改</el-button
              >
              <el-button type="text" size="small" @click="deleteButton(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            :current-page="params.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="params.pagesize"
            background
            :page-sizes="[5, 10, 15, 20]"
            layout="prev, pager, next, sizes, jumper"
            :total="totals"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <el-dialog
    :title="addForm.id ? '修改学科' : '添加学科'" :visible="dialogVisible" width="50%" @close="closeDialog">
      <el-form
        :model="addForm"
        :rules="addRules"
        label-width="80px"
        ref="addRef"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="addForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="addForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, update } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      subjectEnum: {
        1: '是',
        0: '否'
      },
      value: true,
      formInline: {
        subjectName: '',
        region: ''
      },
      listDate: [],
      // 分页参数
      params: {
        page: 1,
        pagesize: 10
      },
      totals: 0,
      props: {
        dialogVisible: {
          type: Boolean,
          required: true
        }
      },
      addForm: {
        isFrontDisplay: '',
        subjectName: '',
        id: ''
      },
      addRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      // 控制新增/修改按钮的显示隐藏
      dialogVisible: false
    }
  },
  created () {
    this.getSubjectslist()
  },
  methods: {
    // 点击X和蒙板时，会触发 close 事件
    closeDialog () {
      // 清空表单内容
      this.$refs.addRef.resetFields()
      // 清空新增学科内容
      this.addForm = {
        isFrontDisplay: '',
        subjectName: '',
        id: ''
      }
      // 关闭弹窗
      this.dialogVisible = false
    },
    deleteButton (id) {
      console.log('删除按钮')
      // 询问用户
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发起请求
        await remove({ id })
        // 提示用户
        this.$message.success('删除学科成功')
        // 如果当前页只剩最后一条数据，删除最后一条数据时，需要让页码值减一
        if (this.listDate.length === 1 && this.params.page > 1) {
          this.params.page--
        }

        this.onSubmit()
      })
    },
    clearButton () {
      // console.log('清除按钮')
      this.formInline.subjectName = ''
      this.params = {
        page: 1,
        pagesize: 10
      }
      this.getSubjectslist()
    },
    async onSubmit () {
      const res = await list({ ...this.formInline, ...this.params })
      console.log('搜索按钮', res)
      this.listDate = res.data.items
      this.totals = res.data.counts
    },
    async submit () {
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        if (this.addForm.id) {
          await update(this.addForm)
        } else {
          await add(this.addForm)
        }
        // 提示用户
        this.$message.success(this.addForm.id ? '修改学科成功' : '添加学科成功')
        // 关闭弹窗
        this.dialogVisible = false
        if (this.addForm.subjectName) {
          this.onSubmit()
        } else {
          // 刷新列表
          this.getSubjectslist()
        }
      })
    },
    editSubmit (row) {
      this.addForm.id = row.id
      this.addForm.subjectName = row.subjectName
      this.addForm.isFrontDisplay = row.isFrontDisplay
      this.dialogVisible = true
    },
    addSubject () {
      // console.log('新增学科按钮')
      this.dialogVisible = true
      this.addForm.isFrontDisplay = 1
    },
    dateFormat (str) {
      return dayjs(str).format('YYYY-MM-DD hh:mm:ss')
    },
    async getSubjectslist () {
      const res = await list(this.params)
      // console.log(res)
      this.listDate = res.data.items
      console.log(res.data.items)
      this.totals = res.data.counts
    },
    handleSizeChange (newPage) {
      // console.log(`每页 ${newPage} 条`)
      this.params.pagesize = newPage
      this.getSubjectslist()
    },
    handleCurrentChange (newPage) {
      // console.log(`当前页: ${newPage}`)
      this.params.page = newPage
      this.getSubjectslist()
    },

    // 点击学科目录 跳转
    toDirectory (row) {
      console.log('跳转了')
      this.$router.push({
        path: 'directorys',
        query: {
          name: row.subjectName,
          id: row.id
        }
      })
    },
    // 点击学科标签 跳转
    toTags (row) {
      console.log('跳转了')
      this.$router.push({
        path: 'tags',
        query: {
          name: row.subjectName,
          id: row.id
        }
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container >>> .el-dialog__footer {
  text-align: right;
}
.bg-purple-light {
  background: #f0f2f5;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 13px;
  color: #909399;
}
.el-icon-info {
  padding: 0 8px;
}
.el-table {
  margin-top: 15px;
}
</style>
